<template>
  <div class="app-container">

    <!-- 搜索 -->
    <page-search
        ref="searchRef"
        :search-config="searchConfig"
        @query-click="handleQueryClick"
        @reset-click="handleResetClick"
    />

    <!-- 列表 -->
    <page-content
        ref="contentRef"
        :content-config="contentConfig"
        @search-click="handleSearchClick"
    >
      <template #taskStatus="scope">
        <el-tag :color="getDownloadTaskStatusColor(scope.row[scope.prop])" @click="showMsg(scope.row)">
          <span style="color: white">{{ getDownloadTaskStatusLabel(scope.row[scope.prop]) }}</span>
        </el-tag>
      </template>

      <template #tool="scope">
        <el-button :icon="Download" :disabled="!['S','W','E'].includes(scope.row.taskStatus)" size="small" link
                   @click="download(scope.row.taskId)" type="primary">下载
        </el-button>
        <el-button :icon="Close" :disabled="!['R','A'].includes(scope.row.taskStatus)" size="small" link
                   @click="cancelTask(scope.row.taskId)" type="danger">取消
        </el-button>
      </template>

      <template #usingTime="scope">
        {{ scope.row[scope.prop] ? (scope.row[scope.prop] / 1000) + "s" : '-' }}
      </template>

    </page-content>

    <el-dialog v-model="dialogVisible" title="提示" width="60%">
      <div style="white-space: pre-wrap;width: 100%">{{ content }}</div>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import {getDownloadTaskStatusColor, getDownloadTaskStatusLabel} from "@/api/downloadTask/model";
import DownloadTaskAPI from "@/api/downloadTask/index";
import type {IObject, IOperatData} from "@/hooks/usePage";
import usePage from "@/hooks/usePage";
import contentConfig from "./config/content";
import searchConfig from "./config/search";
import {Close, Download} from '@element-plus/icons-vue'
import {onMounted} from "vue";
import { useRoute } from 'vue-router'
const {
  searchRef,
  contentRef,
  handleQueryClick,
  handleResetClick,
  handleSearchClick,
  handleRefreshClick,
  handleInitParams,
} = usePage();


function download(taskId: any) {
  DownloadTaskAPI.download(taskId);
}

function cancelTask(taskId: any) {
  ElMessageBox.confirm(
      '是否确认取消该任务？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '返回',
        type: 'warning',
      }
  ).then(() => {
    DownloadTaskAPI.cancelTask(taskId).then((response) => {
      if (response.status) {
        ElMessage.success(response.message || "操作成功")
        handleRefreshClick()
      }
    })

  })
}

const content = ref("")
const dialogVisible = ref(false)

function showMsg(row: any) {
  let msg = row.msg
  if (msg != null && msg.toString().length > 0) {
    dialogVisible.value = true
    content.value = msg
  } else {
    if (row.taskStatus == 'R') {
      ElMessage.warning('执行中...');
    } else if (row.taskStatus == 'C') {
      ElMessage.info('已取消...');
    } else if (row.taskStatus == 'S') {
      ElMessage.success('执行成功...');
    } else if (row.taskStatus == 'W') {
      ElMessage.warning('执行成功，但是有警告...');
    } else if (row.taskStatus == 'D') {
      ElMessage.warning('文件已过期...');
    } else if (row.taskStatus == 'A') {
      ElMessage.warning('等待执行...');
    } else if (row.taskStatus == 'E') {
      ElMessage.warning('异常终止...');
    }
  }

}

const route = useRoute()
onActivated(() => {
  const taskId = route.query.taskId as string | undefined
  if (taskId) {
    handleInitParams({taskId:taskId})
    setTimeout(() => {
      handleQueryClick({taskId:taskId})
    }, 300)
  }
})

defineOptions({
  name: 'downloadTask:page'
})
</script>
